<script setup>
import { Message } from "@arco-design/web-vue";
import { onMounted, reactive, ref } from "vue";
import { GETBLOGSLIST } from "@/api/post";
import { useRouter } from "vue-router";
import mtz from "moment-timezone";
const params = reactive({
  page_size: 5,
  page_num: 1,
  status: "published",
});
const total = ref(0);
const router = useRouter();
const data = ref([]);
//请求数据
const requestPage = async () => {
  try {
    await GETBLOGSLIST(params).then(
      (value) => {
        data.value = value.Msg.items;
        total.value = value.Msg.total;
        for (let x of data.value) {
          if (x.updated_at !== 0) {
            x.updated_at = mtz(x.updated_at * 1000)
              .tz("Asia/Shanghai")
              .format("YYYY-MM-DD HH:mm:ss");
          }
        }
      },
      (reason) => {
        // console.log(reason);
        Message.error(reason);
      }
    );
  } catch (error) {
    console.log(error);
  }
};
//点击阅读全文事件
const goToRead = (id) => {
  router.push({
    path: `/reception/blogs/${id}`,
  });
};
onMounted(requestPage);
//改变页数
const changeToPageNum = async (current) => {
  params.page_num = current;
  requestPage();
};

//改变每页
const changeToPageSize = async (pageSize) => {
  params.page_size = pageSize;
  requestPage();
};
</script>
<template>
  <div class="card-list">
    <a-space direction="vertical" fill>
      <div v-for="item in data" :key="item.id">
        <a-card class="card-demo" hoverable bordered>
          <a-space direction="vertical" fill>
            <div class="card-head">
              <a
                style="
                  font-size: 1.5em;
                  font-weight: bolder;
                  font-family: fangsong;
                  color: #000;
                "
                @click="goToRead(item.id)"
              >
                {{ item.title }}
                <!-- 头部分 -->
              </a>
              <a-divider />
              <div class="summary">
                <!-- 摘要部分 -->
                摘要：{{ item.summary }}
              </div>
              <div class="card-foot">
                <a-button
                  size="small"
                  type="outline"
                  class="readpage"
                  @click="goToRead(item.id)"
                  >阅读全文</a-button
                >
                <div>
                  updated @ {{ item.updated_at }}
                  <a-divider direction="vertical" />
                  {{ item.author }}
                </div>
                <!-- 结尾部分 -->
              </div>
            </div>
          </a-space>
        </a-card>
      </div>
      <div class="pagination-foot">
        <a-pagination
          :total="total"
          size="large"
          show-total
          show-jumper
          :page-size="params.page_size"
          show-page-size
          :current="params.page_num"
          :page-size-options="[2, 5, 8, 10, 20]"
          @change="changeToPageNum"
          @page-size-change="changeToPageSize"
        />
      </div>
    </a-space>
  </div>
</template>

<style scoped>
.card-list {
  display: flex;
  margin: 15px auto 0;
  width: 90%;
  flex-direction: column;
}
.card-demo {
  transition-property: all;
}
.card-demo:hover {
  transform: translateY(-4px);
}
.card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 2%;
}
.readpage {
  padding: revert;
  border-style: dotted;
}
.summary {
  margin: auto 1px 3%;
  display: flex;
  flex-direction: column;
}

.card-foot {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.pagination-foot {
  display: flex;
  justify-content: center;
}
</style>
